<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>
        <div>dart语言特性</div>
        <ul>
            <li>..和.</li>
            <li>num、int和double</li>
            <li>三目运算符?:</li>
            <li>int b = a ?? 2;// 表示，如果a为空，则返回2</li>
            <li>Dart中，布尔值 只有true是真 false是假 其他全不合法(与js不一样)。</li>
            <li>在Dart中，没有类似于java中声明变量作用域的关键字，如public，protected和private。如果一个标识符以下划线_开头，则表示是私有的，否则表示公有的。</li>
            <li>可以使用var 声明变量，第一次赋值时，dart根据赋值的数据自动推导其类型，比如var age = 1，那么age就是int类型了，就不能在赋值别的类型了，如再age = “12”，那么就报错了。</li>
            <li>dart中则不能让字符串与数字相加，比如将数字转为字符串才能相加，其实就是字符串链接。</li>
        </ul>
        <ul>
            <li>末尾! 和 ?.</li>
            <li>dart抽象类</li>
            <li>isolate</li>
            <li>stream 和 feature</li>
            <li>await for</li>
            <li>mixin</li>
        </ul>
    </li>
    <li>
        <div>生命周期</div>
        <ul>
            <li>flutter</li>
            <li>vue</li>
            <li>react</li>
        </ul>
    </li>
    <li>
        <div>路由</div>
        <ul>
            <li>flutter</li>
            <li>vue</li>
            <li>react</li>
        </ul>
    </li>
    <li>
        <div>更新机制</div>
        <ul>
            <li></li>
        </ul>
    </li>
    <li>
        <div>组件通信</div>
        <ul>
            <li>
                <div>flutter组件通信</div>
                <ul>
                    <li>props</li>
                    <li>provider</li>
                    <li>eventBus</li>
                    <li>
                        <div>inheritedWidget</div>
                        <div>context如何获取到的 所有的实例保存在_inheritedWidgets这个map中</div>
                    </li>
                    <li>Notification</li>
                    <li>changeNotifier</li>
                </ul>
            </li>
            <li>
                <div>vue组件通信</div>
                <ul>
                    <li>props</li>
                    <li>provide, inject</li>
                    <li>eventBus</li>
                    <li>$parent, $children, $root</li>
                </ul>
            </li>
            <li>
                <div>react组件通信</div>
                <ul>
                    <li>props</li>
                    <li>provide reactStore</li>
                    <li>eventBus</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <div>虚拟dom和diff</div>
        <ul>
            <li>
                <div>react</div>
                <ul>
                    <li>.jsx</li>
                    <li>
                        <div>虚拟dom（或者vdom）</div>
                        <ul>
                            <li>对真实dom操作过多会卡，会闪，尽可能少的操作真实dom节点</li>
                            <li>什么是虚拟dom（一个js对象，用来描述真实dom，和真实dom同步）</li>
                            <li>为什么使用虚拟dom，不用真实dom做diff（节点属性太多，比较成本高，大多数也不是经常会被使用）</li>
                            <li>在哪里使用虚拟dom</li>
                            <li>version17以前 需要babel-loader把jsx转换成React.createElement(...)形式，该函数生成vdom来描述dom</li>
                            <li>version17以后 用jsx-runtime编译</li>
                            <li>hook 16.8以后出现的</li>
                            <li>createElement</li>
                            <li>cloneElement</li>
                            <li>Component</li>
                            <li>PureComponent</li>
                            <li>render</li>
                            <li>react Flow</li>
                            <li>type key ref props</li>
                            <li>(原生标签)props -> children -> 各种属性包含props</li>
                            <li>(文本标签)props -> children -> 文本</li>
                            <li>render</li>
                            <li>createNode</li>
                            <li>原生标签、文本、函数组件、类组件、fragment</li>
                            <li>原生标签需要创建属性和遍历子节点</li>
                            <li>算法复杂度</li>
                            <li>react16 引入fiber</li>
                            <li>react vdom 和 fiber dom</li>
                            <li>fiber style单独处理，因为style在react是对象，在原生当中是字符串，所有要么把style变成字符串给node，要么用node.style方式一个一个赋值</li>
                            <li>window.requestIdCallback()</li>
                            <li>Flags 操作</li>
                            <li>ReactWorkTag</li>
                        </ul>
                    </li>
                    <li>
                        <div>hook</div>
                        <ul>
                            <li>useState</li>
                            <li>useReducer</li>
                        </ul>
                    </li>
                    <li>
                        <div>render</div>
                        <ul>
                            <li>将虚拟dom变成真实dom</li>
                            <li>reactDom.render, Component</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <div>vue</div>
                <ul>
                    <li>.vue</li>
                    <li>vue为什么不需要fiber，vue每个任务都有监听，颗粒度够小</li>
                </ul>
            </li>
            <li>
                <div>flutter</div>
                <ul>
                    <li>widget（类比jsx）</li>
                    <li>element（类比js）</li>
                    <li>renderObject（类比render）</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>与原生通信</li>
    <li>开发文档</li>
</ul>
<section>
    <h4>问题</h4>
    <ul>
        <li>react componentWillMount使用场景</li>
        <li>react componentWillReceiveProps使用场景</li>
    </ul>
    <ul>
        <li>react 新版生命周期</li>
    </ul>
    <ul>
        <li>vue2 生命周期</li>
        <li>vue3 生命周期</li>
    </ul>
    <ul>
        <li>didChangeDependencies使用场景</li>
    </ul>
</section>
<section>
    <h4>adidas总结</h4>
    <ul>
        <li>
            <div>权限</div>
            <ul>
                <li>
                    <div>角色固定，根据角色生成路由</div>
                    <ul>
                        <li>
                            <div>先拦截404还是401？</div>
                            <ul>
                                <li>先拦截401，还要在判断404</li>
                                <li>先拦截404（去和所有的路由匹配，找不到跳转404，此时不用调用接口消耗性能），有角色没有权限跳转401，没有角色直接跳转401</li>
                            </ul>
                        </li>
                        <li>
                            <div>一个url路径如何在路由表中找到？</div>
                            <ul>
                                <li>采用栈的做法，将url分割为数组arr，在路由表中递归查找，找到就将arr.shift()，循环结束后，看arr的长度，没有就表示找到了</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>角色不固定，根据角色的权限，生成相应的路由</li>
            </ul>
        </li>
    </ul>
</section>
<section>
    <h4>位预算</h4>
    <ul>
        <li>&</li>
        <li>|</li>
        <li>^</li>
        <li>~</li>
        <li>>></li>
        <li><<</li>
        <li>>>></li>
        <li><<<</li>
        <li>左移相当于*2，不考虑正负数</li>
        <li>右移相当于/2，考虑正负数（正数高位补0，负数高位补1）</li>
    </ul>
</section>
<script>
    // 原来的虚拟dom
    const vnode = {
        props: {
            children: [], // 可能是数组，可能是字符串，可能是对象
            className: ''
        },
        type: '', // 'div' function(){} 没有type值
        ref: '',
        key: ''
    }
    // fiber 结构
    const fiberNode = {
        stateNode: {}, // 原生标签，函数组件此属性为null，类组件此属性为类的实例
        child: {
            stateNode: {},
            child: {
                child: {},
                stateNode: {},
                index: 0,
                sibling: {}
            },
            index: 0,
            sibling: {}
        },
        index: 0, // 用来判断位置是否发生移动
        type: 'div',
        key: null,
        ref: null,
        sibling: null,
        memoizedProps: {name: 'zhangsan', href: 'https://www.baidu.com'},
        pendingProps: {name: 'zhangsan', href: 'https://www.baidu.com'},
        return: {}, // 返回父节点
        alternate: null // 上一次的节点
    }


</script>
</body>
</html>